<template>
	<!-- 20221010 -->
	<view class="user-config-mobile-change-confirm-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 表单内容 -->
			<view>
				<!-- 手机号 -->
				<view class="margin-left-30 padding-right-30 line-height-100 border-bottom-ed">
					<input class="line-height-100" type="number" maxlength="11" placeholder="请输入手机号"
						placeholder-class="text-28 text-aa" v-model="mobilePhone"></input>
				</view>

				<!-- 验证码 -->
				<view class="padding-lr-30 line-height-100 border-bottom-ed flex align-center">
					<input class="flex-one line-height-100" type="number" maxlength="4" placeholder="请输入验证码"
						placeholder-class="text-28 text-aa" v-model="code"></input>
					<ty-register-get-code :mobile-phone="mobilePhone" :type="type"></ty-register-get-code>
				</view>

				<!-- 提交按钮 -->
				<view
					class="margin-top-100 margin-lr-30 line-height-90 radius-45 bg-main-gradient text-center text-32 text-ff"
					@click="finish()">完成</view>
			</view>
		</view>
		<!-- 页面浮层 -->
		<view class="page-layer">
		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 新手机号
				mobilePhone: '',
				// 旧手机号
				mobilePhoneOld: '',
				// 验证码
				code: '',
				// 验证码场景
				type: 5
			}
		},

		onLoad(options) {
			// 旧手机号
			this.mobilePhoneOld = options.hasOwnProperty('mobile') ? options.mobile : ''
		},

		methods: {
			/** 
			 * 绑定新手机号
			 * @date 2022-10-10
			 */
			finish() {
				if (!this.mobilePhone) {
					this.cn.toast("请输入手机号")
					return false
				}

				if (!this.code) {
					this.cn.toast("请输入验证码")
					return false
				}

				// 绑定手机号
				user.bindNewMobilePhone(this.mobilePhone, this.mobilePhoneOld, this.code).then(res => {
					if (res.code == 0) {
						// 返回上一层页面
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: #FFF;
	}
</style>
